<template>
  <div class="">
    <el-card class="box-card">
      <el-form ref="ref" :model="model" :rules="rules" label-width="150px">
        <el-tabs class="dialog-body" tab-position="left" :style="{height:height+'px'}">
          <el-tab-pane label="上传设置" lazy>
            <el-form-item label="存储方式" prop="storage">
              <el-radio-group v-model="model.storage" @change="storageChange">
                <el-radio v-for="(item, index) in storages" :key="index" :label="index" border>{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="model.storage=='qiniu'">
              <el-form-item label="">
                <el-card class="box-card">
                  <div class="text item">
                    文件将上传到七牛云 Kodo 存储，对象存储 > 空间管理 > 空间设置 > 访问控制, 设置为 公开空间。<br>
                    需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
                  </div>
                </el-card>
              </el-form-item>
              <el-form-item label="AccessKey" prop="qiniu.accesskey" class="margin-bottom">
                <el-input v-model="model.qiniu.accesskey" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu.accesskey, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">AccessKey（AK） 在 [ 七牛云 > 个人中心 > 密钥管理 ] 设置和获取</el-col>
              </el-form-item>
              <el-form-item label="SecretKey" prop="qiniu.secretkey" class="margin-bottom">
                <el-input v-model="model.qiniu.secretkey" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu.secretkey, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">SecretKey（SK） 在 [ 七牛云 > 个人中心 > 密钥管理 ] 设置和获取</el-col>
              </el-form-item>
              <el-form-item label="空间名称" prop="qiniu.bucket" class="margin-bottom">
                <el-input v-model="model.qiniu.bucket" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu.bucket, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">空间名称 在 [ 七牛云 > 对象存储 > 空间管理] 设置和获取</el-col>
              </el-form-item>
              <el-form-item label="外链域名" prop="qiniu.url" class="margin-bottom">
                <el-input v-model="model.qiniu.url" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu.url, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">外链域名 在 [ 七牛云 > 对象存储 > 空间管理 > 域名设置 ] 设置和获取</el-col>
              </el-form-item>
            </div>
            <div v-else-if="model.storage=='aliyun'">
              <el-form-item label="">
                <el-card class="box-card">
                  <div class="text item">
                    文件将上传到阿里云 OSS 存储，需要配置 OSS 公开访问及跨域策略。
                    <br>
                    需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
                  </div>
                </el-card>
              </el-form-item>
              <el-form-item label="AccessKey ID" prop="aliyun.access_key_id" class="margin-bottom">
                <el-input v-model="model.aliyun.access_key_id" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun.access_key_id, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">AccessKey ID 在 [ 阿里云 > 个人中心 > AccessKey 管理 ] 设置和获取</el-col>
              </el-form-item>
              <el-form-item label="AccessKey Secret" prop="aliyun.access_key_secret" class="margin-bottom">
                <el-input v-model="model.aliyun.access_key_secret" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun.access_key_secret, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">AccessKey Secret 在 [ 阿里云 > 个人中心 > AccessKey 管理 ] 设置和获取</el-col>
              </el-form-item>
              <el-form-item label="Bucket名称" prop="aliyun.bucket" class="margin-bottom">
                <el-input v-model="model.aliyun.bucket" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun.bucket, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">Bucket 名称 在 [ 阿里云 > 对象存储 > Bucket 列表 ] 获取</el-col>
              </el-form-item>
              <el-form-item label="Endpoint地域节点" prop="aliyun.endpoint" class="margin-bottom">
                <el-input v-model="model.aliyun.endpoint" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun.endpoint, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">Endpoint（地域节点） 在 [ 阿里云 > 对象存储 > Bucket 列表 > Bucket 概览 ] 获取</el-col>
              </el-form-item>
              <el-form-item label="Bucket域名" prop="aliyun.bucket_domain" class="margin-bottom">
                <el-input v-model="model.aliyun.bucket_domain" clearable>
                  <el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun.bucket_domain, $event)" />
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col class="line" :span="24">Bucket 域名 在 [ 阿里云 > 对象存储 > Bucket 列表 > Bucket 概览 ] 获取</el-col>
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="">
                <el-card class="box-card">
                  <div class="text item">
                    文件将存储在本地服务器，默认保存在 public/storage 目录，文件以 hash 命名。
                  </div>
                  <div class="text item">
                    文件存储的目录需要有读写权限（777），有足够的存储空间。
                  </div>
                </el-card>
              </el-form-item>
            </div>
          </el-tab-pane>

          <el-tab-pane label="上传限制" lazy>
            <el-form-item label="图片大小" prop="image_size" class="margin-bottom">
              <el-col :span="11">
                <el-input v-model="model.image_size" clearable>
                  <template slot="append">KB</template>
                </el-input>
              </el-col>
              <el-col class="line" :span="13">
                允许上传的图片大小，单位 KB
              </el-col>
            </el-form-item>
            <el-form-item label="图片格式" prop="image_ext">
              <el-col :span="11">
                <el-input v-model="model.image_ext" clearable />
              </el-col>
              <el-col class="line" :span="13">
                允许上传的图片后缀，逗号,隔开
              </el-col>
            </el-form-item>
            <el-form-item label="视频大小" prop="video_size" class="margin-bottom">
              <el-col :span="11">
                <el-input v-model="model.video_size" clearable>
                  <template slot="append">KB</template>
                </el-input>
              </el-col>
              <el-col class="line" :span="13">
                允许上传的视频大小，单位 KB
              </el-col>
            </el-form-item>
            <el-form-item label="视频格式" prop="video_ext">
              <el-col :span="11">
                <el-input v-model="model.video_ext" clearable />
              </el-col>
              <el-col class="line" :span="13">
                允许上传的视频后缀，逗号,隔开
              </el-col>
            </el-form-item>
            <el-form-item label="音频大小" prop="audio_size" class="margin-bottom">
              <el-col :span="11">
                <el-input v-model="model.audio_size" clearable>
                  <template slot="append">KB</template>
                </el-input>
              </el-col>
              <el-col class="line" :span="13">
                允许上传的音频大小，单位 KB
              </el-col>
            </el-form-item>
            <el-form-item label="音频格式" prop="audio_ext">
              <el-col :span="11">
                <el-input v-model="model.audio_ext" clearable />
              </el-col>
              <el-col class="line" :span="13">
                允许上传的音频后缀，逗号,隔开
              </el-col>
            </el-form-item>
            <el-form-item label="其它文件大小" prop="other_size" class="margin-bottom">
              <el-col :span="11">
                <el-input v-model="model.file_size" clearable>
                  <template slot="append">KB</template>
                </el-input>
              </el-col>
              <el-col class="line" :span="13">
                允许上传的其它文件大小，单位 KB
              </el-col>
            </el-form-item>
            <el-form-item label="其它文件格式" prop="other_ext">
              <el-col :span="11">
                <el-input v-model="model.file_ext" clearable />
              </el-col>
              <el-col class="line" :span="13">
                允许上传的其它文件后缀，逗号,隔开
              </el-col>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-form-item>
          <el-button :loading="loading" icon="el-icon-refresh-left" @click="refresh()">刷新</el-button>
          <el-button :loading="loading" type="primary" icon="el-icon-s-promotion" @click="submit()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import clip from '@/utils/clipboard'
import {uploadConfig} from '@/api/admin/setting'

export default {
  name: 'AdminSettingUpload',
  components: {},
  data() {
    const qiniuValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(rule.field + '为必传项'))
      }
      callback()
    }
    const qiniuAccesskey = (rule, value, callback) => {
      if (this.model.storage == 'qiniu' && value === '') {
        callback(new Error('AccessKey为必传项'))
      }
      callback()
    }
    const qiniuSecretkey = (rule, value, callback) => {
      if (this.model.storage == 'qiniu' && value === '') {
        callback(new Error('SecretKey为必传项'))
      }
      callback()
    }
    const qiniuBucket = (rule, value, callback) => {
      if (this.model.storage == 'qiniu' && value === '') {
        callback(new Error('空间名称为必传项'))
      }
      callback()
    }
    const qiniuDomain = (rule, value, callback) => {
      if (this.model.storage == 'qiniu' && value === '') {
        callback(new Error('外链域名为必传项'))
      }
      callback()
    }
    return {
      height: 668,
      loading: false,
      storages: [],
      model: {
        id: '',
        storage: 'local',
        qiniu: {
          accesskey: '',
          secretkey: '',
          bucket: '',
          url: ''
        },
        aliyun: {
          access_key_id: '',
          access_key_secret: '',
          bucket: '',
          endpoint: '',
          bucket_domain: ''
        },
        image_size: 0,
        image_ext: '',
        video_size: 0,
        video_ext: '',
        audio_size: 0,
        audio_ext: '',
        file_size: 0,
        file_ext: ''
      },
      rules: {
        //qiniu: [{required: true, validator: qiniuValidate, trigger: 'blur'}],
        qiniu: {
          accesskey: [{required: true, message: '请输入AccessKey', trigger: 'blur'}],
          secretkey: [{required: true, message: '请输入SecretKey', trigger: 'blur'}],
          bucket: [{required: true, message: '请输入空间名称', trigger: 'blur'}],
          url: [{required: true, message: '请输入外链域名', trigger: 'blur'}]
          /*accesskey: [{required: true, validator: qiniuAccesskey, trigger: 'blur'}],
          secretkey: [{required: true, validator: qiniuSecretkey, trigger: 'blur'}],
          bucket: [{required: true, validator: qiniuBucket, trigger: 'blur'}],
          url: [{required: true, validator: qiniuDomain, trigger: 'blur'}]*/
        }
      }
    }
  },
  created() {
    this.info()
  },
  methods: {
    // 信息
    info() {
      uploadConfig().then((res) => {
        this.storages = res.data.storages
        this.model = res.data.config
      })
    },
    // 刷新
    refresh() {
      this.loading = true
      uploadConfig().then((res) => {
        this.loading = false
        this.storages = res.data.storages
        this.model = res.data.config
      })
    },
    // 提交
    submit() {
      this.$refs['ref'].validate((valid) => {
        if (valid) {
          this.loading = true
          uploadConfig(this.model, 'post').then(res => {
            this.loading = false
            this.$message.success(res.msg)
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },

    // 存储方式选择
    storageChange() {
      if (this.$refs['ref'] !== undefined) {
        this.$refs['ref'].clearValidate()
      }
    },
    // 复制
    copy(text, event) {
      if (text) {
        clip(text, event)
      } else {
        this.$message.error('内容为空')
      }
    }
  }
}
</script>

<style>
.dialog-body .el-tabs__content {
  padding-right: 10px;
}
</style>

<style scoped>
.margin-bottom {
  margin-bottom: 5px;
}
.el-form .line {
  padding-left: 15px;
}
</style>
